<template >
  <div>
    <router-view></router-view>
    <a-button @click="handleAdd">添加</a-button>
    <a-input-number id="inputNumber" v-model:value="limitAge" :min="1" :max="21" />
    <a-range-picker v-model:value="time.value" />
    <a-button @click="handleSearch">搜索</a-button>
    <a-table :dataSource="dataSource" :columns="columns" :pagination="false">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-button type="text" @click="handleClickEdit(record)">编辑</a-button>
          <a-popconfirm title="Are you sure delete this task?" ok-text="Yes" cancel-text="No" @confirm="confirm(record)">
            <a-button type="text">删除</a-button>
          </a-popconfirm>

        </template>
      </template>
    </a-table>

    <a-pagination v-model:current="page" :defaultPageSize="8" :total="total" show-less-items @change="handleChange"
      :showSizeChanger="false" />

    <a-modal v-model:open="open" title="Basic Modal" @ok="handleOk">
      <a-form ref="formRef" :rules="rules" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item name="name" label="姓名">
          <a-input v-model:value="formState.name" />
        </a-form-item>
        <a-form-item name="age" label="年龄">
          <a-input-number v-model:value="formState.age" />
        </a-form-item>
        <a-form-item name="sex" label="性别">
          <a-radio-group v-model:value="formState.sex">
            <a-radio value="男">男</a-radio>
            <a-radio value="女">女</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item name="birthday" label="出生日期">
          <a-date-picker v-model:value="formState.birthday" format="YYYY-MM-DD HH:mm:ss" show-time
            placeholder="请选择日期时间" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs'
import http from '@/http'
import { reactive, ref, onMounted, toRef, nextTick } from 'vue'
import { message } from 'ant-design-vue'
const dataSourceTive = reactive({
  value: []
})
const formRef = ref<any>(null)
const labelCol = { style: { width: '150px' } }
const wrapperCol = { span: 14 }
const dataSource = toRef(dataSourceTive, 'value')
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: '性别',
    dataIndex: 'sex',
    key: 'sex'
  },
  {
    title: '生日',
    dataIndex: 'birthday',
    key: 'birthday'
  }, {
    title: '操作',
    // dataIndex: 'birthday',
    key: 'action'
  }
]
const page = ref(1)
const open = ref(false)
const limitAge = ref(null)
const total = ref(0)
const time = reactive({
  value: []
})

const rules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
  age: [
    { required: true, message: '请输入年龄', trigger: 'change' },
    {
      validator: (rule, value, callback) => {
        if (value < 10 || value > 80) {
          callback('请输入合理年龄')
        }
        callback()
      },
      message: '请输入合理年龄',
      trigger: 'change'
    }
  ],
  sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
  birthday: [{ required: true, message: '请选择出生日期', trigger: 'change' }]
}
const formState = ref({
  name: '',
  age: null,
  sex: null,
  birthday: null
})
const fetchList = () => {
  http.get('/api/getList', {
    params: {
      size: 8,
      page: page.value,
      limitAge: limitAge.value
    }
  }).then(res => {
    console.log(res)
    dataSource.value = res.data.list
    total.value = res.data.total
  })
}

const handleChange = () => {
  fetchList()
}

const handleSearch = () => {
  page.value = 1
  fetchList()
}

const handleAdd = () => {
  open.value = true
  nextTick(() => {
    formRef.value.resetFields()
    // console.log(formRef.value)
  })
}

const handleClickEdit = (record) => {
  open.value = true
  // 赋值回显
  nextTick(() => {
    formState.value = { ...record, birthday: dayjs(record.birthday) }
  })
}

const confirm = (record) => {
  const { id } = record
  http.get('/api/deleteItem', { params: { id } }).then(res => {
    if (res.data.code === 200) {
      message.success('删除成功')
      fetchList()
    } else {
      message.error('删除失败')
    }
  })
}

const handleOk = async () => {
  // save
  try {
    await formRef.value?.validate()
    const params = {
      ...formState.value,
      birthday: dayjs(formState.value.birthday).format('YYYY-MM-DD HH:mm:ss')
    }
    if (formState.value.id) {
      const result = await http.post('/api/editItem', params)
      if (result.data.code === 200) {
        message.success('编辑成功')
        open.value = false
        fetchList()
      } else {
        message.error('编辑失败')
      }
    } else {
      const result = await http.post('/api/addItem', params)
      if (result.data.code === 200) {
        message.success('添加成功')
        open.value = false
        page.value = 1
        fetchList()
      } else {
        message.error('添加失败')
      }
    }
  } catch (err) { }
}

onMounted(() => {
  fetchList()
})
</script>
<style lang="scss"></style>
